html`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">`initial_start_date = d3.min(quakes_data_df, d => d.date_only)
initial_end_date = d3.max(quakes_data_df, d => d.date_only)
initial_min_magnitude = 1
viewof start_date = Inputs.date({
label: "Start Date",
value: initial_start_date,
max: initial_end_date,
min: initial_start_date
})
viewof end_date = Inputs.date({
label: "End Date",
value: initial_end_date,
min: initial_start_date,
max: initial_end_date
})
viewof min_magnitude = Inputs.range([1, 10], {
step: 0.1,
label: "Min Magnitude",
value: initial_min_magnitude
})
viewof reset = html`<button class="reset-button" id="resetButton"><i class="fas fa-redo"></i></button>`
// Custom Reset Button with Icon
html`<style>
.reset-button {
width: 40px;
height: 40px;
border: none;
background-color: #D5C3C3;
color: #5A5555;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.reset-button:hover {
background-color: #AB8787;
}
.reset-button i {
font-size: 15px;
}
</style>`filtered_quakes = quakes_data_df.filter(d =>
new Date(d.date_only) >= new Date(start_date) &&
new Date(d.date_only) <= new Date(end_date) &&
d.mag >= min_magnitude
)L = require('leaflet@1.2.0')
// Include Leaflet CSS and custom legend CSS
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`html`
<style>
.info.legend {
line-height: 18px;
color: #555;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
padding: 10px;
}
.info.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
`color_scale = d3.scaleSequential(t => d3.interpolateMagma(1 - t))
.domain([1, 6]);
// Create the map with filtered data
// Create the map with filtered data
map = {
// Calculate dimensions based on card width
let width = 850; // Prilagodite širinu kartice prema potrebi
let height = width / 1.6; // Omjer širine i visine za kartu
// Create the container for the map
let container = DOM.element('div', {
style: `width: ${width}px; height: ${height}px`
});
yield container;
let map = L.map(container).setView([44.4, 16.4], 7);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
filtered_quakes.forEach(d => {
L.circleMarker([d.lat, d.lon], {
radius: d3.scaleLinear().domain([1, 6]).range([1, 6])(d.mag),
fillColor: color_scale(d.mag),
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.5
}).addTo(map)
.bindPopup(`
Date: ${d.date_only}<br/>
Time: ${d.time_only}<br/>
Magnitude: ${d.mag.toFixed(2)}<br/>
Depth: ${d.depth} km<br/>
Location: ${d.place}
`);
});
// Add legend to the map
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [1, 2, 3, 4, 5,6],
labels = [];
div.innerHTML += '<strong>Magnitude</strong><br>';
// Loop through intervals to generate labels with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
var label = grades[i];
if (label === 6) {
label = '6+';
}
div.innerHTML +=
'<i style="background:' + color_scale(grades[i]) + '"></i> '+
label + '<br>';
}
return div;
};
legend.addTo(map);
return map;
}viewof table = Inputs.table(filtered_quakes, {
columns: [
"date_only",
"time_only",
"mag",
"depth",
"place"
],
header: {
date_only: "Date",
time_only: "Time",
mag: "Magnitude",
depth: "Depth",
place: "Location"
},
width: {
date_only: 150,
time_only: 100,
mag: 80,
depth: 80,
place: 150
},
format: {
depth: x => Number.isInteger(x) ? x.toString() : x.toFixed(2)
},
rows: Infinity,
pagination: true
})
html`<style>
table {
table-layout: auto;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #5A5555;
border-bottom: 1px solid #ddd;
font-family: Baskerville;
font-weight: bold;
}
td {
border-bottom: 1px solid #ddd;
word-wrap: break-word;
font-family: Montserrat;
color: #5A5555;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
table tr:hover {
background-color: #D5C3C3;
}
</style>
`resetButton = {
viewof reset.addEventListener("click", () => {
viewof start_date.value = initial_start_date;
viewof end_date.value = initial_end_date;
viewof min_magnitude.value = initial_min_magnitude;
});
}
html`
<style>
.dashboard-footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #f8f9fa;
color: #5A5555;
text-align: left;
padding: 5px;
font-size: 0.7em;
border-top: 1px solid #eee;
line-height: 1.2;
font-family: Baskerville;
}
.dashboard-footer a {
color: #AB8787;
text-decoration: none;
}
</style>
<footer class="dashboard-footer">
Data source: <a href="https://earthquake.usgs.gov/" target="_blank">USGS</a>.
Note: The data may not reflect real-time conditions due to potential missing earthquakes.
Smaller earthquakes, especially outside the U.S., may not be rapidly reported or located. For more detailed information, please refer to the USGS website. The earthquake data is updated daily at 9:00 AM UTC.
<a href="https://github.com/andabaka/earthquakes" target="_blank">
<i class="fab fa-github"></i> Source Code
</a>
</footer>
`